<template>
  <div class="container">
    <el-card class="content1" shadow="never">
      <el-row :gutter="20" style="text-align: center;padding:5px 0">
        <el-col :span="12">
          <el-button @click="goRelease" class="goReleaseBtn btn"
            >新建文档
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-button @click="goDelete" class="goDeleteBtn btn"
            >文档回收站
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="content2" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold"
          >已发文档数量（{{ sendTypeCount }}）
        </span>
      </div>
      <div>
        <div class="category" v-for="(item, index) in sendCount" :key="index">
          <div class="category1">
            <span style="float: left;margin-left:20px" class="categoryText">{{
              item.NAME
            }}</span>
            <span style="float:right;margin-right:20px" class="categoryText">
              {{ item.annNumber }}
            </span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="content3" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold"
          >已收文档数量（{{ receiveTypeCount }}）
        </span>
      </div>
      <div>
        <div
          class="category"
          v-for="(item, index) in receiveCount"
          :key="index"
        >
          <div class="category1">
            <span style="float: left;margin-left:20px" class="categoryText">{{
              item.NAME
            }}</span>
            <span style="float:right;margin-right:20px" class="categoryText">
              {{ item.annNumber }}
            </span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    this.getHomeCount();
  },
  data() {
    return {
      receiveCount: [],
      sendCount: []
    };
  },
  computed: {
    sendTypeCount() {
      let num = 0;
      this.sendCount.map(item => {
        num += item.annNumber ? item.annNumber : 0;
      });
      return num;
    },
    receiveTypeCount() {
      let num = 0;
      this.receiveCount.map(item => {
        num += item.annNumber ? item.annNumber : 0;
      });
      return num;
    }
  },
  methods: {
    //获取数据统计
    getHomeCount() {
      let tem = { module: "DOCUMENT" };
      this.API.getMyDocumentCategoryCount(tem).then(ret => {
        this.receiveCount = ret.data.receiveCount;
        this.sendCount = ret.data.sendCount;
      });
    },
    //跳转发布文档页面
    goRelease() {
      this.$router.push({ name: "release" });
    },
    //跳转回收站
    goDelete() {
      this.$router.push({ name: "mineDeleteFlag" });
    }
  }
};
</script>
<style scoped>
.container {
  height: 760px;
  display: flex;
  flex-flow: column;
  float: left;
  width: 22%;
}

.content1 {
  width: 100%;
  height: 100px;
}

.content2 {
  width: 100%;
  height: 325px;
  margin-top: 10px;
}

.content3 {
  width: 100%;
  height: 325px;
  margin-top: 10px;
}

.btn {
  width: 140px;
  height: 48px;
  font-size: 15px;
  border: 0;
  border-radius: 6px;
}

.goReleaseBtn {
  background-color: #0075ff;
  color: #ffffff;
}

.goDeleteBtn {
  background-color: #5fe1e0;
  color: #ffffff;
}

.category {
  float: left;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.category:nth-child(1) {
  margin-top: 0;
}

.category:nth-child(2) {
  margin-top: 0;
}

.category1 {
  width: 120px;
  height: 40px;
  background: rgba(244, 250, 255, 1);
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 2px 10px;
}

.categoryText {
  text-align: center;
  line-height: 40px;
  color: #99b4ca;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
